<template>
  <div class="min-h-screen flex items-center justify-center px-4">
    <div class="w-full max-w-md card-rect p-8 text-white/90">
      <h1 class="text-3xl font-extrabold text-center mb-8 tracking-wide">注册</h1>

      <form class="space-y-6" @submit.prevent="submit">
        <div>
          <input v-model.trim="form.username" class="input-rect w-full" placeholder="用户名" autocomplete="username" />
          <p v-if="errors.username" class="text-red-400 text-xs mt-1">{{ errors.username }}</p>
        </div>
        <div>
          <input v-model.trim="form.name" class="input-rect w-full" placeholder="姓名" autocomplete="username" />
          <p v-if="errors.name" class="text-red-400 text-xs mt-1">{{ errors.name }}</p >
        </div>
        <div>
          <input v-model.trim="form.password" type="password" class="input-rect w-full" placeholder="密码（至少6位）" autocomplete="new-password" />
          <p v-if="errors.password" class="text-red-400 text-xs mt-1">{{ errors.password }}</p>
        </div>

        <div>
          <input v-model.trim="form.confirmPassword" type="password" class="input-rect w-full" placeholder="再次输入密码" autocomplete="new-password" />
          <p v-if="errors.confirmPassword" class="text-red-400 text-xs mt-1">{{ errors.confirmPassword }}</p>
        </div>

        <button class="btn-solid w-full h-11" :disabled="isSubmitting">{{ isSubmitting ? '提交中…' : '注册' }}</button>

        <div class="border-t border-white/10" />
        <button type="button" class="btn-dark w-full h-11" @click="$router.push('/login')">已有账号？去登录</button>
      </form>
    </div>
  </div>
</template>

<script>
import { addCustomer } from '@/api/CustomerApi.js'
import toast from '@/composables/toast'

export default {
  name: 'Register',
  data(){
    return {
      form: { username: '', password: '', confirmPassword: '',name: '' },
      errors: { username: '', password: '', confirmPassword: '',name:'' },
      isSubmitting: false,
    }
  },
  methods: {
    validate(){
      this.errors = { username: '', password: '', confirmPassword: '',name:'' }
      if(!this.form.username){ this.errors.username = '请输入用户名' }
      if(!this.form.password){ this.errors.password = '请输入密码' }
      if(this.form.password && this.form.password.length < 6){ this.errors.password = '密码至少6位' }
      if(!this.form.confirmPassword){ this.errors.confirmPassword = '请再次输入密码' }
      if(this.form.password && this.form.confirmPassword && this.form.password !== this.form.confirmPassword){
        this.errors.confirmPassword = '两次密码不一致'
      }
      return !this.errors.username && !this.errors.password && !this.errors.confirmPassword
    },
    async submit(){
      if(this.isSubmitting) return
      if(!this.validate()) return
      try{
        this.isSubmitting = true
        const payload = { username: this.form.username, name: this.form.name,password: this.form.password }
        const resp = await addCustomer(payload)
        const { code, msg } = resp?.data || {}
        if(code !== 200){ throw new Error(msg || '注册失败') }
        toast.success('注册成功，请登录')
        this.$router.push('/login')
      }catch(e){
        toast.error(e.message || '注册失败')
      }finally{
        this.isSubmitting = false
      }
    }
  }
}
</script>
